<template>
  <div>
    <!-- 顶部logo -->
    <van-nav-bar fixed>
      <template #left>
        <img :src="imgObj" alt="" class="logo">
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="#fff"/>
      </template>
    </van-nav-bar>
    <!-- 标签页 -->
    <van-tabs
    v-model="channelid"
      animated
      sticky
      offset-top="1.226667rem"
    >
    <!-- :name="item,id tabs组件v-model默认绑定的值是tab中的name字段
          后端调用接口时需要当前频道id -->
      <van-tab v-for="item in channelList" :title="item.name" :key="item.id" :name="item.id">
        <ArticleList  :cid = "channelid"></ArticleList>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import logoPng from '../../assets/toutiao_logo.png'
import { userChannelAPI } from '@/api'
import ArticleList from './ArticleList.vue'
export default {
  data () {
    return {
      imgObj: logoPng,
      channelList: [],
      channelid: 0 // 频道数据
    }
  },
  async created () {
    const res = await userChannelAPI()
    // console.log(res)
    const { channels } = res.data.data
    this.channelList = channels
  },
  components: { ArticleList }
}
</script>

<style scoped lang="less">
  .logo{
    width: 100px;
    height: 30px;
  }
  //  /* tab内容距离tab导航的距离 */
  /deep/ .van-tabs__content{
      padding-top: 44px;
  }
</style>
